<template>
	<div class="organization">
		<div class="container">
		<div class="top-form">
			<el-button type="primary" @click="onAdd">新增</el-button>
		</div>
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'leaf'}">
	    <el-table-column prop="name" label="组织名称" width="220"></el-table-column>
	   	<el-table-column prop="id" label="流水编号" width="100"></el-table-column>
	    <el-table-column prop="charge" label="部门主管" width="160">
	    	<template slot-scope="scope">
     		{{(scope.row.charger)? scope.row.charger.nickname+'['+scope.row.charger.account+']':'无'}}
    		</template>
	    </el-table-column>
	    <el-table-column prop="precharge" label="分管副总" width="160">
	    	<template slot-scope="scope">
     		{{(scope.row.precharger)? scope.row.precharger.nickname+'['+scope.row.precharger.account+']':'无'}}
    		</template>
	    </el-table-column>
	    <el-table-column prop="code" label="组织编码" width="100"></el-table-column>
	    <el-table-column prop="users" label="部门人数" width="100"></el-table-column>
	    <el-table-column prop="stime" label="创建时间" width="120">
            <template slot-scope="scope">{{utils.dateStr(scope.row.stime, "Y-m-d")}}</template>
        </el-table-column>
	    <el-table-column prop="desc" label="组织描述"></el-table-column>
 		  <el-table-column prop="btn" label="操作" width="160">
 		  	<template slot-scope="scope">
                <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="onDelete(scope.row)">删除</el-button>
			</template>
 		  </el-table-column>
	  </el-table>
	</div>
	<!-- 编辑弹出框 -->
	<el-dialog :title="page.popTitle" center :visible.sync="page.dialogVisible" :width="page.popWidth">
		<div v-if="page.pop == 1 || page.pop == 3" class="pop_box">
			<STform :ref-obj.sync="formInfo.ref" :data="formInfo.data" :field-list="formInfo.fieldList" :rules="formInfo.rules"
				 :listTypeInfo="dictList" :label-width="formInfo.labelWidth" @handleEvent="handleFormEvent"></STform>
			<div class="dialog-footer">
				<el-button @click="hidePop">取 消</el-button>
				<el-button type="primary" @click="doSubmit">确 定</el-button>
			</div>
		</div>
		<div v-if="page.pop == 2"  class="pop_box">
			<div class="pop_concent">删除不可恢复，是否确定删除？</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="hidePop">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</div>
		</div>
	</el-dialog>
</div>
</template>

<script>
	import STform from '@/components/common/STform'
	import orgAPI from '@/api/sys/organization.js'
	import consts from './consts.js'
    import utils from '@/libs/utils.js'
	import {mapState} from 'vuex' //本地取信息
	export default {
		components: {STform},
		data() {
			return {
                utils:utils,
				details: {},
				tableData:[],
				page: {
					popWidth: '720px',
					popTitle: null,
					dialogVisible: false,
					pop: 0
				},
				formInfo: { // 表格数据
					ref: null,
					data: consts.fieldData(null),
					rules: consts.rules,
					labelWidth: '120px',
					fieldList: consts.fieldList
				},
			}
		},
		async created() {
			await this.fetchData();
			this.loading = false;
		},
		computed: {
			dictList() {
				return this.$store.getters["dictSrv/list"];
			},
			...mapState({
                dicts: (state) => {
                  return state.dictSrv.data;
                }
            })
		},
		methods: {
			async fetchData(params) {
				this.loading = false;
				const ojson  = await orgAPI.getList(null);
				if(ojson && ojson.code == 0) {
					this.tableData = ojson.datas;
				}
				this.loading = false;
				this.hidePop();
			},
			async onDelete(data) {
				this.details = data;
				this.showPop(2);
			},
			async deleteRow() {
				const osjon = await orgAPI.doDelete({id:this.details.id});
				if(osjon){
					this.fetchData(null);
					this.hidePop();
				}
			},
			onAdd() {
				this.formInfo.ref && this.formInfo.ref.resetFields();
				this.formInfo.data = consts.fieldData(null);
				this.showPop(1);
			},
			async onEdit(data) {
				this.formInfo.ref && this.formInfo.ref.resetFields();
				data = JSON.parse(JSON.stringify(data));
                data.stime = utils.dateStr(data.stime, "Y-m-d");
				this.formInfo.data = consts.fieldData(data);
				var users = [];
				if (data.chargeuid && data.charger) {
					users.push([data.chargeuid, data.charger.nickname]);
				}
				if (data.prechargeuid && data.precharger) {
					users.push([data.prechargeuid, data.precharger.nickname]);
				}
				this.$store.commit("dictSrv/initSet", {sysUser:users});
				this.showPop(3);
			},
			async doSubmit() {
				this.formInfo.ref.validate(async (valid) => {
					if (valid) {
						(!this.formInfo.data.pid) && (this.formInfo.data.pid = 0);
						const data = JSON.parse(JSON.stringify(this.formInfo.data))
						var res = await orgAPI.doSave(data);
						if (res) {
							await this.fetchData();
						}
						this.hidePop();
					} else {
						return false;
					}
				});
			},
			handleFormEvent() {
			},
			handleEvent(type, data) {
				switch (type) {
					case 'tableCheck':
						this.multipleSelection = [];
						for (const index in data) {
							this.multipleSelection.push(data[index].styleId);
						}
						break;
				}
			},
			showPop(pop) {
				this.page.popWidth = "720px";
				if (pop == 1 || pop == 3) {
					this.page.popTitle = ((pop == 1)? '新增':'编辑') + '部门组织';
				} else  {
					this.page.popTitle = '删除部门组织';
					this.page.popWidth = "300px";
				}
				this.page.pop = pop;
				this.page.dialogVisible = true;
			},
			hidePop() {
				this.page.dialogVisible = false;
				this.page.pop = 0;
			}
		}
	}
</script>

<style scoped>
	.pop_box .pop_left{
		display: inline-block;
		vertical-align: top;
		width: calc( 100% - 244px);
	}
	.pop_box .pop_right{
		display: inline-block;
		vertical-align: top;
		width: 240px;
		height: 500px;
		position: relative;

		overflow:scroll;
	}
	.el-tree{
		position: absolute;
	}
</style>
